<template>
  <div class="login">
    <div class="login-head"></div>
    <div class="user">
      <img v-if="username" src="../assets/user1.png" alt="">
      <img v-else src="../assets/user2.png" alt="">
      <input v-model="username" type="text" placeholder="用户名">
    </div>
    <div class="password">
      <img v-if="password" src="../assets/password1.png" alt="">
      <img v-else src="../assets/password2.png" alt="">
      <input v-model="password" type="password" placeholder="请输入密码">
    </div>

    <div class="showError">
      <div v-if="showError" class="errorText">{{errorText}}</div>
    </div>

    <div @click="clickLogin" class="login-btn" >
      <button>登录</button>
    </div>
    <div @click="clickRegister" class="register-btn">
      <button>注册</button>
    </div>
    <div class="join-btn">
      <span>公司已注册?使用邀请码</span>
      <span @click="toInviteCodeRegister" class="join-text">加入公司</span>
    </div>
  </div>
</template>

<script>
  import { login } from '../api/auth';
  import logger from '../utils/logger';
  import { getRewardList, getPropagationList } from '../api/user';
  export default {
    data() {
      return {
        username: '',
        password: '',
        disabled: false,
        showError: false,
        errorText: '用户名或者密码错误'
      };
    },
    methods: {
      async getRankData() {
        const rewardInfo = await getRewardList();
        const result = await getPropagationList();
        window._META_INFO = Object.assign(window._META_INFO,
          { rewardValue: rewardInfo.data.rewardValue },
          { sharedCount: result.data.sharedCount },
          { rewardPosition: rewardInfo.data.position }
        );
      },
      clickLogin() {
        if (this.disabled) {
          return;
        }
        if (!this.username.trim()) {
          this.errorText = '请输入用户名';
          this.showError = true;
          return;
        }

        if (!this.password) {
          this.errorText = '请输入密码';
          this.showError = true;
          return;
        }
        // 保证用户名小写且前后不含空格
        const username = this.username.trim().toLowerCase();

        this.disabled = true;

        login(username, this.password)
          .then((res) => {
            window._META_INFO = Object.assign(window._META_INFO, res.data);
            this.disabled = false;
            this.getRankData();
            this.$router.push({path: '/user', query: { origin: 'LOGIN' }});
          })
          .catch((err) => {
            const data = err.response.data;
            this.errorText = data.message || '用户名或密码错误';
            this.disabled = false;
            this.showError = true;
          });
      },
      toInviteCodeRegister() {
        this.$router.push('/register/invitation_code');
      },
      clickRegister() {
        this.$router.push('/register');
      }
    }
  };
</script>

<style scoped>
  bgdy {
    background-color: #fff;
  }

  img,input {
    margin: 0;
    padding: 0;
    outline: none;
    -webkit-appearance: none;
    border-radius: 0;
  }

  .login {
    width: 100%;
  }

  .login-head {
    width: 100%;
    height: 4.61rem;
    background: #46B2E0 url(../assets/login-bg.jpg) no-repeat;
    background-size: 100% 100%;
    margin-bottom: 1rem;
  }

  .user {
    display: flex;
    height: 0.68rem;
    padding: 0 1.26rem;
  }

  .user img {
      width: 0.46rem;
      height: 0.46rem;
      margin-top: 0.12rem;
      margin-right: 0.2rem;
    }

  .password img {
    width: 0.46rem;
    height: 0.5rem;
    margin-top: 0.1rem;
    margin-right: 0.2rem;
  }

  input {
    flex: 1;
    font-size: 0.3rem;
    color: #666;
    padding: 0.2rem;
    border: none;
    border-bottom: 1px solid #c1c0c0;
  }

  .password {
    display: flex;
    height: 0.68rem;
    padding: 0 1.26rem;
    margin: 0.5rem 0 0 0
  }

  .login-btn,
  .register-btn {
    padding: 0 0.98rem;
    margin-bottom: 0.26rem;
    height: 0.94rem;
  }

  .login-btn button,
  .register-btn button {
    font-size: 0.4rem;
    width: 100%;
    height: 0.94rem;
    background-color: #fff;
    border: 1px solid #c1c0c0;
    border-radius: 0.47rem;
    color: #686868;
    outline: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }

  .login-btn button {
    color: #fff;
    background: linear-gradient(to right, #578DE4,#3BC7DD);
  }

  .showError {
    position: relative;
    height: 1.2rem;
    width: 100%;
    font-size: 0.28rem;
  }
  .showError .errorText {
    position: absolute;
    right: 1.2rem;
    top: 0.2rem;
    color: #e43439;
  }

  .join-btn {
    padding: 0.2rem 0;
    font-size: 0.3rem;
    text-align: center;
    color: #686868;
  }

  .join-text {
    color: dodgerblue;
  }

</style>
